<template>
  <div class="deal-pass-container">
    <!-- 顶部导航 -->
    <div class="header">
      <div class="back-button" @click="goBack">
        <van-icon name="arrow-left" size="20" />
      </div>
      <h1 class="header-title">交易密码</h1>
    </div>
    
    <!-- 交易密码状态 -->
    <div class="status-card">
      <div class="status-icon" :class="{ 'status-set': hasPassword }">
        <van-icon :name="hasPassword ? 'passed' : 'warning-o'" size="32" />
      </div>
      <div class="status-text">
        <h3>{{ hasPassword ? '已设置交易密码' : '未设置交易密码' }}</h3>
        <p>{{ hasPassword ? '交易密码用于保护您的资产安全，请妥善保管' : '设置交易密码可以保护您的资产安全' }}</p>
      </div>
    </div>
    
    <!-- 操作按钮 -->
    <div class="action-buttons">
      <van-button 
        type="primary" 
        block 
        @click="showSetPasswordForm"
      >
        {{ hasPassword ? '修改交易密码' : '设置交易密码' }}
      </van-button>
      
      <van-button 
        v-if="hasPassword"
        plain 
        block 
        @click="showResetPasswordForm"
        class="reset-button"
      >
        忘记交易密码
      </van-button>
    </div>
    
    <!-- 安全提示 -->
    <div class="security-tips">
      <div class="tips-header">
        <van-icon name="info-o" />
        <span>安全提示</span>
      </div>
      <div class="tips-content">
        <p>1. 交易密码用于提现、转账等资金操作，请设置高强度密码。</p>
        <p>2. 请勿使用与登录密码相同的交易密码。</p>
        <p>3. 请勿将交易密码告知他人，包括BTDApp客服人员。</p>
        <p>4. 如忘记交易密码，可通过身份验证重置。</p>
      </div>
    </div>
    
    <!-- 设置/修改密码弹窗 -->
    <van-popup
      v-model:show="showSetForm"
      position="bottom"
      round
      closeable
      close-icon="close"
      :style="{ height: '70%' }"
    >
      <div class="password-form">
        <div class="form-header">
          <h2>{{ hasPassword ? '修改交易密码' : '设置交易密码' }}</h2>
        </div>
        
        <van-form @submit="submitSetPassword">
          <van-cell-group inset v-if="hasPassword">
            <van-field
              v-model="setForm.oldPassword"
              type="password"
              name="oldPassword"
              label="当前密码"
              placeholder="请输入当前交易密码"
              :rules="[{ required: true, message: '请输入当前交易密码' }]"
              :right-icon="showOldPassword ? 'eye-o' : 'closed-eye'"
              @click-right-icon="showOldPassword = !showOldPassword"
              :type="showOldPassword ? 'text' : 'password'"
            />
          </van-cell-group>
          
          <van-cell-group inset>
            <van-field
              v-model="setForm.newPassword"
              type="password"
              name="newPassword"
              label="新密码"
              placeholder="请输入6位数字交易密码"
              :rules="[
                { required: true, message: '请输入新交易密码' },
                { pattern: /^\d{6}$/, message: '交易密码必须为6位数字' }
              ]"
              :right-icon="showNewPassword ? 'eye-o' : 'closed-eye'"
              @click-right-icon="showNewPassword = !showNewPassword"
              :type="showNewPassword ? 'text' : 'password'"
            />
            
            <van-field
              v-model="setForm.confirmPassword"
              type="password"
              name="confirmPassword"
              label="确认密码"
              placeholder="请再次输入新交易密码"
              :rules="[
                { required: true, message: '请再次输入新交易密码' },
                { validator: validateConfirmPassword, message: '两次输入的密码不一致' }
              ]"
              :right-icon="showConfirmPassword ? 'eye-o' : 'closed-eye'"
              @click-right-icon="showConfirmPassword = !showConfirmPassword"
              :type="showConfirmPassword ? 'text' : 'password'"
            />
          </van-cell-group>
          
          <div class="form-actions">
            <van-button 
              round 
              block 
              type="primary" 
              native-type="submit"
              :loading="submitting"
            >
              确认
            </van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
    
    <!-- 重置密码弹窗 -->
    <van-popup
      v-model:show="showResetForm"
      position="bottom"
      round
      closeable
      close-icon="close"
      :style="{ height: '80%' }"
    >
      <div class="password-form">
        <div class="form-header">
          <h2>重置交易密码</h2>
        </div>
        
        <van-steps :active="resetStep" class="reset-steps">
          <van-step>身份验证</van-step>
          <van-step>设置新密码</van-step>
          <van-step>完成</van-step>
        </van-steps>
        
        <!-- 步骤1：身份验证 -->
        <div v-if="resetStep === 0" class="reset-step-content">
          <van-form @submit="verifyIdentity">
            <van-cell-group inset>
              <van-field
                v-model="resetForm.idCard"
                name="idCard"
                label="身份证号"
                placeholder="请输入身份证号码"
                :rules="[
                  { required: true, message: '请输入身份证号码' },
                  { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '身份证号码格式不正确' }
                ]"
              />
              
              <van-field
                v-model="resetForm.phone"
                name="phone"
                label="手机号码"
                placeholder="请输入绑定的手机号码"
                type="tel"
                :rules="[
                  { required: true, message: '请输入手机号码' },
                  { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确' }
                ]"
              />
              
              <van-field
                v-model="resetForm.smsCode"
                center
                clearable
                name="smsCode"
                label="验证码"
                placeholder="请输入短信验证码"
                :rules="[{ required: true, message: '请输入短信验证码' }]"
              >
                <template #button>
                  <van-button 
                    size="small" 
                    type="primary" 
                    :disabled="smsCodeTimer > 0"
                    @click="sendSmsCode"
                  >
                    {{ smsCodeTimer > 0 ? `${smsCodeTimer}秒后重发` : '获取验证码' }}
                  </van-button>
                </template>
              </van-field>
            </van-cell-group>
            
            <div class="form-actions">
              <van-button 
                round 
                block 
                type="primary" 
                native-type="submit"
                :loading="verifying"
              >
                下一步
              </van-button>
            </div>
          </van-form>
        </div>
        
        <!-- 步骤2：设置新密码 -->
        <div v-if="resetStep === 1" class="reset-step-content">
          <van-form @submit="setNewPassword">
            <van-cell-group inset>
              <van-field
                v-model="resetForm.newPassword"
                type="password"
                name="newPassword"
                label="新密码"
                placeholder="请输入6位数字交易密码"
                :rules="[
                  { required: true, message: '请输入新交易密码' },
                  { pattern: /^\d{6}$/, message: '交易密码必须为6位数字' }
                ]"
                :right-icon="showResetNewPassword ? 'eye-o' : 'closed-eye'"
                @click-right-icon="showResetNewPassword = !showResetNewPassword"
                :type="showResetNewPassword ? 'text' : 'password'"
              />
              
              <van-field
                v-model="resetForm.confirmPassword"
                type="password"
                name="confirmPassword"
                label="确认密码"
                placeholder="请再次输入新交易密码"
                :rules="[
                  { required: true, message: '请再次输入新交易密码' },
                  { validator: validateResetConfirmPassword, message: '两次输入的密码不一致' }
                ]"
                :right-icon="showResetConfirmPassword ? 'eye-o' : 'closed-eye'"
                @click-right-icon="showResetConfirmPassword = !showResetConfirmPassword"
                :type="showResetConfirmPassword ? 'text' : 'password'"
              />
            </van-cell-group>
            
            <div class="form-actions">
              <van-button 
                round 
                block 
                type="primary" 
                native-type="submit"
                :loading="submitting"
              >
                确认
              </van-button>
            </div>
          </van-form>
        </div>
        
        <!-- 步骤3：完成 -->
        <div v-if="resetStep === 2" class="reset-step-content">
          <div class="reset-success">
            <van-icon name="checked" size="64" class="success-icon" />
            <h3>交易密码重置成功</h3>
            <p>您的交易密码已成功重置，请妥善保管</p>
            
            <van-button 
              round 
              type="primary" 
              block 
              @click="closeResetForm"
              class="done-button"
            >
              完成
            </van-button>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showSuccessToast } from 'vant'

const router = useRouter()

// 交易密码状态
const hasPassword = ref(true) // 假设已设置交易密码

// 设置/修改密码表单
const showSetForm = ref(false)
const submitting = ref(false)
const showOldPassword = ref(false)
const showNewPassword = ref(false)
const showConfirmPassword = ref(false)
const setForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 重置密码表单
const showResetForm = ref(false)
const resetStep = ref(0)
const verifying = ref(false)
const showResetNewPassword = ref(false)
const showResetConfirmPassword = ref(false)
const smsCodeTimer = ref(0)
const resetForm = ref({
  idCard: '',
  phone: '',
  smsCode: '',
  newPassword: '',
  confirmPassword: ''
})

// 返回上一页
const goBack = () => {
  router.back()
}

// 显示设置/修改密码表单
const showSetPasswordForm = () => {
  setForm.value = {
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
  }
  showSetForm.value = true
}

// 显示重置密码表单
const showResetPasswordForm = () => {
  resetStep.value = 0
  resetForm.value = {
    idCard: '',
    phone: '',
    smsCode: '',
    newPassword: '',
    confirmPassword: ''
  }
  showResetForm.value = true
}

// 验证确认密码
const validateConfirmPassword = () => {
  return setForm.value.newPassword === setForm.value.confirmPassword
}

// 验证重置确认密码
const validateResetConfirmPassword = () => {
  return resetForm.value.newPassword === resetForm.value.confirmPassword
}

// 提交设置/修改密码
const submitSetPassword = () => {
  submitting.value = true
  
  // 模拟API请求
  setTimeout(() => {
    if (hasPassword.value && setForm.value.oldPassword !== '123456') {
      showToast('当前密码不正确')
      submitting.value = false
      return
    }
    
    hasPassword.value = true
    showSuccessToast(hasPassword.value ? '交易密码修改成功' : '交易密码设置成功')
    
    submitting.value = false
    showSetForm.value = false
  }, 1500)
}

// 发送短信验证码
const sendSmsCode = () => {
  if (!resetForm.value.phone) {
    showToast('请先输入手机号码')
    return
  }
  
  // 模拟发送验证码
  showToast('验证码已发送')
  
  // 倒计时
  smsCodeTimer.value = 60
  const timer = setInterval(() => {
    smsCodeTimer.value--
    if (smsCodeTimer.value <= 0) {
      clearInterval(timer)
    }
  }, 1000)
}

// 验证身份
const verifyIdentity = () => {
  verifying.value = true
  
  // 模拟API请求
  setTimeout(() => {
    // 假设验证成功
    resetStep.value = 1
    verifying.value = false
  }, 1500)
}

// 设置新密码
const setNewPassword = () => {
  submitting.value = true
  
  // 模拟API请求
  setTimeout(() => {
    resetStep.value = 2
    submitting.value = false
  }, 1500)
}

// 关闭重置表单
const closeResetForm = () => {
  showResetForm.value = false
}
</script>

<style scoped>
.deal-pass-container {
  min-height: 100vh;
  background-color: #f8fafc;
  padding-bottom: 24px;
}

/* 顶部导航 */
.header {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  cursor: pointer;
  color: #334155;
  background: transparent;
  border: none;
  padding: 0;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}

/* 状态卡片 */
.status-card {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  padding: 24px;
  margin: 16px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.status-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #fee2e2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  color: #ef4444;
}

.status-icon.status-set {
  background-color: #dcfce7;
  color: #10b981;
}

.status-text h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 8px;
}

.status-text p {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

/* 操作按钮 */
.action-buttons {
  padding: 0 16px;
}

.reset-button {
  margin-top: 12px;
}

/* 安全提示 */
.security-tips {
  background-color: #ffffff;
  padding: 16px;
  margin: 24px 16px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.tips-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  color: #3b82f6;
}

.tips-header .van-icon {
  margin-right: 8px;
}

.tips-header span {
  font-size: 16px;
  font-weight: 500;
}

.tips-content p {
  font-size: 14px;
  color: #334155;
  margin: 8px 0;
  line-height: 1.5;
}

/* 密码表单 */
.password-form {
  padding: 20px;
}

.form-header {
  text-align: center;
  margin-bottom: 20px;
}

.form-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}

.form-actions {
  margin-top: 24px;
  padding: 0 16px;
}

/* 重置步骤 */
.reset-steps {
  margin: 20px 0 30px;
}

.reset-step-content {
  margin-top: 20px;
}

/* 重置成功 */
.reset-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
}

.success-icon {
  color: #10b981;
  margin-bottom: 16px;
}

.reset-success h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 8px;
}

.reset-success p {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 32px;
  text-align: center;
}

.done-button {
  width: 80%;
}
</style>
